<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>收藏类</title>
		<link rel="stylesheet" href="./bootstrap-4.6.1-dist/css/bootstrap.min.css" />
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
		<link crossorigin="anonymous" href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css"
			rel="stylesheet">
		<script crossorigin="anonymous" src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
		<script src="./js/jquery-3.6.1.js"></script>
		<script src="./bootstrap-4.6.1-dist/js/bootstrap.bundle.js"></script>

		<style type="text/css">
			body {
				background: url("./img/灰色1.jpg") no-repeat fixed 0 0;
				margin: 0 auto;
				background-size: cover;
				width: 100%;
				height: 100%;

			}
		</style>
	</head>
	<body>


		<script>
			$(document).ready(function() {

				var id = localStorage.Userid;
				$.ajax({
					url: "http://127.0.0.1:8080/chaxuncollection",
					data: {
						"uid": id
					},
					type: "post",
					dataType: "json",
					success: function(data) {

						for (i = 0; i < data.length; i++) {
							//获取body
							oldbody = $("body");
							len = data.length;
							
								// data[i]["fid"];
							// data[i]["type"];
							// data[i]["name"];
							// data[i]["videourl"];
							// data[i]["message"];
							// data[i]["imgurl"];
							newdiv = $("<div></div>"); //这里循环两次会有两个div

							console.log(newdiv);
							console.log('--------------------')
							newdiv.css({
								"width": "250pt",
								"height": "200pt",
								"float": "left"
							}).attr({
								"class": "container"
							});
							//添加名字
							newdiv.append($("<figcaption>" + data[i]["name"] + "</figcaption>"));
							//<figcaption>也加了两次

							//添加图片
							newdiv.append($("<img></img>").css({
								"width": "100pt",
								"height": "150pt"
							}).attr({
								"class": "img-thumbnai img-fluid",
								"alt": data[i]["name"],
								"src": data[i]["imgurl"]
							}));


							newdiv1 = $("<div></div>").attr({
								"class": "btn-group align-bottom"
							});

							//标签选择器 不唯一
							//添加删除收藏的按钮
							newbutt1 = $("<button></button>").attr({
								"type": "button",
								"class": "btn",
								"filmname": data[i]["name"],
								"id": data[i]["fid"]
								//绑定个删除收藏的函数
							});

							newbutt1.append($("<i></i>")).attr({
								"class": "bi bi-heartbreak-fill btn btn-info  "
							});

							//播放影视按钮
							newbutt2 = $("<button></button>").attr({
								"type": "button",
								"class": "btn btn-info"
							});

							newalink = $("<a></a>").attr({
								"href": data[i]["videourl"],
								"target": "_blank"
							});
							newalink.append($("<i></i>")).attr({
								"class": "bi bi-camera-reels-fill"
							});
							newbutt2.append(newalink);
							newbutt3 = $("<button>detail</button>")
								.attr({
									"type": "button",
									"class": "btn btn-info",
									"data-toggle": "tooltip",
									"data-placement": "right",
									"title": data[i]["message"]
								});
							newdiv1.append(newbutt2);
							newdiv1.append(newbutt1);
							newdiv1.append(newbutt3);
							newdiv.append(newdiv1);
							oldbody.append(newdiv);

						}
					},
					error: function(err) {
						console.log(err);
					},
				});
			});
		</script>
	</body>


</html>
<script>
	//添加动态的节点事件  
	$("body").on("click", "button", function() {
		var fname = this.getAttribute("filmname");
		var eid = localStorage.Userid;
		$.ajax({
			url: "http://127.0.0.1:8080/dropcollection",
			data: {
				"uid": eid,
				"name": fname
			},
			type: "get",
			dataType: "json",
			success: function(result) {

			},
			error: function(err) {
				console.log(err);
			}
		});
	});
</script>
